<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户维护</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="./js/vue.js"></script>
		<script src="./js/asiox.js"></script>
		<script src="js/common.js"></script>
		<script src="./js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<template>
				<el-input placeholder="请输入内容" v-model="input" style="width: 300px;">
					<el-button slot="append" icon="el-icon-search" @click="init"></el-button>
				</el-input>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column label="用户ID" width="100">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.userid}}</span>
						</template>
					</el-table-column>
					<el-table-column label="姓名" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.username }}</span>
						</template>
					</el-table-column>
					<el-table-column label="密码" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">*********<!-- {{ scope.row.userpass }} --></span>
						</template>
					</el-table-column>
					<el-table-column label="账号状态" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.state }}</span>
						</template>
					</el-table-column>
					<el-table-column label="手机号" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.phone }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot="header" slot-scope="scope">
							<el-button size="mini" type="primary" @click="add( scope.row)">新增</el-button>
						</template>
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 抽屉 -->
			<el-drawer title="用户维护" :visible.sync="drawer" :before-close="handleClose">
				<div style="height: 40px;">
					&nbsp;&nbsp;<el-tag type="success">当前用户角色</el-tag>
				</div>

				<template v-for="tag in userRole">
					&nbsp;
					<el-button size="small" style="margin-bottom: 5px;"
						@click="deleteUserRole(tag.roleid)">{{tag.rolename}} <i class="el-icon-minus"></i></el-button>

				</template>
				<hr />

				<div style="height: 40px;">
					&nbsp;&nbsp;<el-tag type="success">所有角色</el-tag>
				</div>

				<template v-for="tag in roleinfolist">

					&nbsp; <el-button @click="addUserRole(tag.roleid)" size="small" type="primary"
						style="margin-bottom: 5px;">{{tag.rolename}} <i class="el-icon-plus"></i></el-button>

				</template>

				 
			</el-drawer>



			<!-- 新增/修改 -->
			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="user" :rules="rules" ref="user" label-width="formLabelWidth" class="demo-ruleForm">
					<el-form-item label="姓名" :label-width="formLabelWidth" prop="username">
						<el-input v-model="user.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth" prop="userpass">
						<el-input v-model="user.userpass" autocomplete="off">
						</el-input>

					</el-form-item>
					<el-form-item label="账号状态" :label-width="formLabelWidth" prop="state">
						<template>
							<el-radio v-model="user.state" label="0">正常</el-radio>
							<el-radio v-model="user.state" label="1">异常</el-radio>
						</template>
					</el-form-item>
					<el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
						<el-input v-model="user.phone" autocomplete="off">
						</el-input>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('user')">提 交</el-button>
				</div>
			</el-dialog>


		</div>
	</body>
</html>
<script>
	new Vue({

		el: "#app",
		data: {
			drawer: false,
			input: "",
			tableData: [],
			userRole: [],
			user: {
				userid: "",
				username: "",
				userpass: "",
				state: " 0",
				phone: "",
				rolename: "",
			},
			dialogFormVisible: false,
			formLabelWidth: "8想0px",
			rules: {
				state: [{
					required: true,
					message: '请重新输入',
					trigger: 'blur'
				}],
				username: [{
					required: true,
					message: '请重新输入',
					trigger: 'blur'
				}],
				userpass: [{
					required: true,
					message: '请重新输入',
					trigger: 'blur'
				}],
				phone: [{
					required: true,
					message: '请重新输入',
					trigger: 'blur'
				}]
			},
			bot: true,
			title: "新增用户",
			nowuserid: "",
			roleinfolist: [],





		},
		methods: {
			//根据用户ID新镇这个用户的角色
			addUserRole(roleid) {
				// alert(this.nowuserid + "==" + roleid)
				axios.get(API + "selectByRoleidAndUserid?roleid=" + roleid + "&userid=" + this.nowuserid).
				then((res) => {
					if (res.data == true) {
						axios.post(API + "insertUserrole", {
							roleid: roleid,
							userid: this.nowuserid
						}).then((res) => {
							axios.get(API + "selectRoleById?userid=" + this.nowuserid).then((res) => {
								this.userRole = res.data.data.roleinfos
							})
							this.$message({
								message: res.data,
								type: 'success'
							});
						})
					} else {
						this.$message.error('用户已经存在该角色,请重新选择!');
					}
				})
			},

			//根据用户ID和角色ID删除这个用户的角色
			deleteUserRole(roleid) {
				// alert(this.nowuserid+"=="+roleid)
				this.userRole = this.userRole.filter(function(obj) {
					return obj.roleid !== roleid
				})
				axios.post(API + "delebyUseridAndRoleid", {
					roleid: roleid,
					userid: this.nowuserid
				}).then((res) => {
					this.$message({
						message: res.data.data.msg,
						type: 'success'
					});

				})

			},
			//获取所有的角色集合
			allRole() {
				axios.get(API + "getRoleinfo").then((res) => {
					this.roleinfolist = res.data.data.roleinfo
				})
			},
			//关闭抽屉
			handleClose() {
				this.$confirm('确认关闭？')
					.then(_ => {
						this.drawer = false
					})
					.catch(_ => {});
			},
			//新增/修改提交方法
			submitForm(users) {
				this.$refs.user.validate((valid) => {
					if (valid) {
						if (this.bot) {
							axios.get("http://localhost:8082/db137/selectName?name=" + this.user.username)
								.then((ccc) => {
									if (ccc.data) {
										axios.get("http://localhost:8082/db137/selectPhone?phone=" +
												this.user.phone)
											.then((ddd) => {
												// console.log("ddd" + JSON.stringify(ddd));
												if (ddd.data) {
													// console.log(this.user);
													// alert(this.user.state)
													//新镇

													axios.post(
														"http://localhost:8082/db137/insertUsert",
														this.user).then((res) => {
														this.$message({
															message: res.data,
															type: 'success'
														});
														this.dialogFormVisible = false
														this.init()
													})

												} else {
													//手机号存在时提示消息
													this.user.phone = ""
													this.$message.error('手机号已经存在,请重新输入');
												}
											})
									} else {
										//姓名存在时提示消息
										this.user.username = ""
										this.$message.error('姓名已经存在,请重新输入');
									}
								})


						} else {
							//修改
							// alert(this.user.state)
							axios.post(API + "updateUser", this.user).then((res) => {
								this.$message({
									message: res.data,
									type: 'success'
								});
								this.dialogFormVisible = false
								this.init()
							})
						}
					}
				})
			},
			//初始方法
			init() {
				axios.get(API + "selectAllUser?username=" + this.input).then((res) => {
					console.log(res.data.data.userinfos);
					this.tableData = res.data.data.userinfos

					for (var i = 0; i < this.tableData.length; i++) {

						this.tableData[i].state = this.tableData[i].state == "0" ? "正常" : "异常"
					}
				})
			},
			//修改填充
			handleEdit(index, row) {
				// row.state = row.state == "正常" ? "0" : "1"
				this.nowuserid = row.userid

				axios.get(API + "selectRoleById?userid=" + this.nowuserid).then((res) => {
					this.userRole = res.data.data.roleinfos
					// alert(JSON.stringify(this.userRole))
				})
				this.drawer = true
				// this.title = "修改用户"
				// this.user=row
				// this.bot = false
				// this.dialogFormVisible = true
			},
			//删除
			handleDelete(index, row) {
				this.$confirm('确认删除？')
					.then(_ => {
						//调用后端删除的方法
						axios.get(API + "deleteUser?id=" + row.userid).then((res) => {
							this.$message({
								message: res.data,
								type: 'success'
							});
							this.init()
						})
					})
					.catch(_ => {});
			},
			//新镇填充
			add(row) {
				this.user = {}
				this.user.state = "0"
				this.bot = true
				this.title = "新增用户"
				this.dialogFormVisible = true
			}
		},
		created() {
			this.init()
			this.allRole()
		}
	})
</script>